import React from "react";
import { Button, Cell, IndexBar } from "react-vant";
import citys from "../../data/cities.json";
import { useNavigate, useSearchParams } from "react-router-dom";
const City = () => {
  const [searchParams] = useSearchParams();
  const type = searchParams.get("type");
  const navigate = useNavigate()
  const handleCity = (city) => {
    localStorage.setItem(type, city);
    navigate(-1)
  };
  return (
    <div>
      <IndexBar>
        {citys.cityList.map((v, i) => {
          return (
            <div key={i}>
              <IndexBar.Anchor index={v.title}></IndexBar.Anchor>
              {v.citys.map((v, i) => {
                return (
                  <Cell
                    key={i}
                    title={v.name}
                    onClick={() => handleCity(v.name)}
                  ></Cell>
                );
              })}
            </div>
          );
        })}
      </IndexBar>
    </div>
  );
};

export default City;
